axios.defaults.method = 'GET';
const axiosBaseURL = 'http://e6dz54.natappfree.cc';
axios.defaults.timeout = 1000;

const entire = document.querySelector('.lyfrank_background');

const rankTopPicture = document.querySelector('.lyfrank_top_picture');
const updateTime = document.querySelector('.lyfline1');
const collect = document.getElementById('lyfcollect');
const comment = document.getElementById('lyfcomment');
const forward = document.getElementById('lyfforward');
const songNumtext = document.querySelector('.lyfsongslist2');

const songTopOneName = document.querySelector('.lyftop1>.lyfnameOfSongs1');
const songTopOneTime = songTopOneName.nextElementSibling;
const songTopOneAuthor = songTopOneTime.nextElementSibling;

const songTopTwoName = document.querySelector('.lyftop2>.lyfnameOfSongs1');
const songTopTwoTime = songTopTwoName.nextElementSibling;
const songTopTwoAuthor = songTopTwoTime.nextElementSibling;

const songTopThreeName = document.querySelector('.lyftop3>.lyfnameOfSongs1');
const songTopThreeTime = songTopThreeName.nextElementSibling;
const songTopThreeAuthor = songTopThreeTime.nextElementSibling;

const List = document.getElementById('lyfsongsStyle');

// const Listbtn = document.getElementById('lyfrankbtn')
// Listbtn.onclick = function(){
    entire.style.display = 'block';
    axios({
        url: axiosBaseURL + '/chart',
        headers: {
            'Accept': 'application/json' 
        }
    }).then(response => {
        console.log(response.data);

        const songs = response.data.data.songs;
        const songNum = response.data.data.songNum;

        const updateTiming = moment(response.data.data.updateTime).format('MM月DD日');
        updateTime.innerHTML = "最近更新：" + updateTiming + "(刚刚更新)";

        rankTopPicture.src = response.data.data.picture;
        collect.innerHTML = "收藏" + "(" + response.data.data.collect + ")";
        comment.innerHTML = "评论" + "(" + response.data.data.comment + ")";
        forward.innerHTML = "分享" + "(" + response.data.data.comment + ")";

        songNumtext.innerHTML = response.data.data.songNum + '首歌';

        songTopOneName.innerHTML = response.data.data.songs[0].name;
        songTopOneTime.innerHTML = response.data.data.songs[0].time;
        songTopOneAuthor.innerHTML = response.data.data.songs[0].author;
        
        songTopTwoName.innerHTML = response.data.data.songs[1].name;
        songTopTwoTime.innerHTML = response.data.data.songs[1].time;
        songTopTwoAuthor.innerHTML = response.data.data.songs[1].author;

        songTopThreeName.innerHTML = response.data.data.songs[2].name;
        songTopThreeTime.innerHTML = response.data.data.songs[2].time;
        songTopThreeAuthor.innerHTML = response.data.data.songs[2].author;

        for(let i = 3; i < songNum; i++){

            List.innerHTML +=
                `
                <div class="songsStyle">
                    <div class="lyfnumberOfSongs">${i+1}</div>
                    <div class="lyfnameOfSongs2">${songs[i].name}</div>
                    <div class="lyfdurationOfSongs">${songs[i].time}</div>
                    <div class="lyfsingerOfSongs">${songs[i].author}</div>
                </div>
                `
            
        }
    }).catch(error => {
        console.error('获取数据失败:', error);
    })
// }
